<!--
  Copyright © 2017 Cask Data, Inc.

  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
-->

<div class="pipeline-configurations-content modeless-container">
  <div class="pipeline-configurations-header modeless-header">
    <div class="modeless-title">
      Configure
      <span ng-if="BatchPipelineConfigCtrl.pipelineName.length > 0">
        "{{BatchPipelineConfigCtrl.pipelineName}}"
      </span>
    </div>
    <div class="btn-group">
      <a class="btn" ng-click="BatchPipelineConfigCtrl.onClose()">
        <span class="fa fa-remove"></span>
      </a>
    </div>
  </div>
  <div class="pipeline-configurations-body modeless-content">
    <div class="configurations-side-panel">
      <div class="configurations-tabs">
        <div class="configuration-tab"
              ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'runtimeArgs'}"
              ng-click="BatchPipelineConfigCtrl.activeTab = 'runtimeArgs'"
              ng-if="BatchPipelineConfigCtrl.isDeployed || BatchPipelineConfigCtrl.showPreviewConfig">
          Runtime arguments
        </div>
        <div class="configuration-tab"
              ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'previewConfig'}"
              ng-click="BatchPipelineConfigCtrl.activeTab = 'previewConfig'"
              ng-if="!BatchPipelineConfigCtrl.isDeployed && BatchPipelineConfigCtrl.showPreviewConfig">
          Preview config
        </div>
        <div class="configuration-tab toggle-advanced-options"
              ng-click="BatchPipelineConfigCtrl.showAdvanced = !BatchPipelineConfigCtrl.showAdvanced"
              ng-if="BatchPipelineConfigCtrl.isDeployed || BatchPipelineConfigCtrl.showPreviewConfig">
          <span class="fa"
                ng-class="{'fa-caret-down': BatchPipelineConfigCtrl.showAdvanced, 'fa-caret-right': !BatchPipelineConfigCtrl.showAdvanced}">
          </span>
          Advanced options
        </div>
        <div class="advanced-options"
              ng-show="BatchPipelineConfigCtrl.showAdvanced || !BatchPipelineConfigCtrl.isDeployed && !BatchPipelineConfigCtrl.showPreviewConfig">
          <div class="configuration-tab"
                ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'pipelineConfig'}"
                ng-click="BatchPipelineConfigCtrl.activeTab = 'pipelineConfig'">
            Pipeline config
          </div>
          <div class="configuration-tab"
                ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'engineConfig'}"
                ng-click="BatchPipelineConfigCtrl.activeTab = 'engineConfig'"
                data-cy="pipeline-configure-engine-tab">
            Engine config
          </div>
          <div class="configuration-tab"
                ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'resources', 'disabled': BatchPipelineConfigCtrl.showPreviewConfig}"
                ng-click="BatchPipelineConfigCtrl.activeTab = 'resources'"
                data-cy="pipeline-configure-resources-tab">
            Resources
          </div>
          <div class="configuration-tab"
                ng-class="{'active': BatchPipelineConfigCtrl.activeTab === 'alerts', 'disabled': BatchPipelineConfigCtrl.showPreviewConfig}"
                ng-click="BatchPipelineConfigCtrl.activeTab = 'alerts'"
                data-cy="pipeline-configure-alerts-tab">
            Pipeline alert
          </div>
        </div>
      </div>
    </div>

    <div class="configuration-content">
      <div class="configuration-step-content configuration-content-container"
            id="runtime-arguments-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'runtimeArgs'">
        <my-pipeline-runtime-args
          runtime-arguments="BatchPipelineConfigCtrl.runtimeArguments"
          contains-macros="BatchPipelineConfigCtrl.containsMacros"
          resolved-macros="BatchPipelineConfigCtrl.resolvedMacros">
        </my-pipeline-runtime-args>
      </div>

      <div class="configuration-step-content configuration-content-container batch-content"
            id="preview-config-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'previewConfig'">
        <div class="step-content-heading">
          Set the number of records to preview
        </div>
        <div class="label-with-toggle num-records-preview row">
          <span class="toggle-label col-xs-5">Number of records to preview</span>
          <div class="col-xs-7 num-preview-input-col">
            <div class="toggle-container">
                <my-number-widget
                class="num-records-input"
                ng-model="BatchPipelineConfigCtrl.numRecordsPreview"
                config="BatchPipelineConfigCtrl.numberConfig"
              ></my-number-widget>
              <i class="fa fa-info-circle"
                uib-tooltip="The number of records to be read during the pipeline preview. For MapReduce, this translates to the number of records that are read by each map task."
                tooltip-placement="right"></i>
            </div>
            <span class="num-preview-info">
              Max up to {{BatchPipelineConfigCtrl.numberConfig['widget-attributes'].max}} records
            </span>
          </div>
        </div>
      </div>

      <div class="configuration-step-content"
            id="pipeline-config-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'pipelineConfig'">
        <div class="step-content-heading">
          Set configurations for this pipeline
        </div>
        <div class="label-with-toggle instrumentation row">
          <span class="toggle-label col-xs-4">Instrumentation</span>
          <div class="col-xs-7 toggle-container">
            <toggle-switch
              is-on="BatchPipelineConfigCtrl.instrumentation"
              on-toggle="BatchPipelineConfigCtrl.onToggleInstrumentationChange"
            ></toggle-switch>
            <i class="fa fa-info-circle"
                uib-tooltip="Emits timing metrics such as total time, mean, standard deviation for pipeline stages. It is recommended to always have this setting on, unless the environment is short on resources."
                tooltip-placement="right">
            </i>
          </div>
        </div>
      </div>
      <div class="configuration-step-content batch-content"
            id="resources-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'resources'">
        <div class="step-content-heading">
          Specify the resources for the following processes of the {{ BatchPipelineConfigCtrl.engineForDisplay }} program
        </div>
        <div class="col-xs-6 driver" data-cy="resources-config-tab-driver">
          <span class="resource-title">
            Driver
          </span>
          <i class="fa fa-info-circle"
              uib-tooltip="Resources for the driver process which initializes the pipeline"
              tooltip-placement="right">
          </i>
          <div class="resource-holder">
            <div
              action-creator="BatchPipelineConfigCtrl.actionCreator"
              store="BatchPipelineConfigCtrl.store"
              resource-type="driverResource"
              on-memory-change="BatchPipelineConfigCtrl.onDriverMemoryChange"
              on-core-change="BatchPipelineConfigCtrl.onDriverCoreChange"
              virtual-cores-value="BatchPipelineConfigCtrl.driverResources.virtualCores"
              memory-mb-value="BatchPipelineConfigCtrl.driverResources.memoryMB"
              my-pipeline-resource-factory
            ></div>
          </div>
        </div>
        <div class="col-xs-6 executor" data-cy="resources-config-tab-executor">
          <span ng-if="BatchPipelineConfigCtrl.engine === 'mapreduce'"
                class="resource-title">
            Mapper/Reducer
          </span>
          <span ng-if="BatchPipelineConfigCtrl.engine === 'spark'"
                class="resource-title">
            Executor
          </span>
          <i class="fa fa-info-circle"
              ng-if="BatchPipelineConfigCtrl.engine === 'mapreduce'"
              uib-tooltip="Resources for Map and Reduce Tasks of the MapReduce program"
              tooltip-placement="right">
          </i>
          <i class="fa fa-info-circle"
              ng-if="BatchPipelineConfigCtrl.engine === 'spark'"
              uib-tooltip="Resources for executor processes which run tasks in an Apache Spark pipeline"
              tooltip-placement="right">
          </i>
          <div class="resource-holder">
            <div
              action-creator="BatchPipelineConfigCtrl.actionCreator"
              store="BatchPipelineConfigCtrl.store"
              resource-type="executorResource"
              on-memory-change="BatchPipelineConfigCtrl.onExecutorMemoryChange"
              on-core-change="BatchPipelineConfigCtrl.onExecutorCoreChange"
              virtual-cores-value="BatchPipelineConfigCtrl.executorResources.virtualCores"
              memory-mb-value="BatchPipelineConfigCtrl.executorResources.memoryMB"
              my-pipeline-resource-factory
            ></div>
          </div>
        </div>
      </div>
      <div class="configuration-step-content"
            id="alerts-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'alerts'">
        <div class="step-content-heading">
          Set alerts for your batch pipeline
        </div>
        <my-post-run-actions
          is-disabled="BatchPipelineConfigCtrl.isDeployed"
          action-creator="BatchPipelineConfigCtrl.actionCreator"
          store="BatchPipelineConfigCtrl.store">
        </my-post-run-actions>
      </div>

      <div ng-class="['configuration-step-content',  'configuration-content-container',  'batch-content', {'allow-force-dynamic-execution': BatchPipelineConfigCtrl.allowForceDynamicExecution}]"
            id="engine-config-tab-content"
            ng-if="BatchPipelineConfigCtrl.activeTab === 'engineConfig'">
        <fieldset ng-if="!BatchPipelineConfigCtrl.allowForceDynamicExecution" ng-disabled="BatchPipelineConfigCtrl.isDeployed">
          <div class="step-content-heading">
            Select the type of engine running your batch pipeline
          </div>
          <div class="engine-config-radio">
            <label class="radio-inline radio-spark">
              <input type="radio"
                      ng-model="BatchPipelineConfigCtrl.engine"
                      ng-change="BatchPipelineConfigCtrl.onEngineChange()"
                      value="spark"
                      data-cy="engine-config-tab-spark" />
              Spark
            </label>
            <label class="radio-inline radio-mapReduce">
              <input type="radio"
                      ng-model="BatchPipelineConfigCtrl.engine"
                      ng-change="BatchPipelineConfigCtrl.onEngineChange()"
                      value="mapreduce"
                      data-cy="engine-config-tab-mapreduce" />
              <i class="fa fa-exclamation-triangle"
                 uib-tooltip="MapReduce is deprecated."
                 tooltip-placement="right">
              </i>
              <span class="deprecated-warning">[Deprecated]</span>
              MapReduce
            </label>
          </div>
        </fieldset>
        <div ng-if="BatchPipelineConfigCtrl.allowForceDynamicExecution">
          <label for="force-dynamic-execution" class="step-content-heading">Dynamic Execution</label>
          <select name="force-dynamic-execution"
              id="force-dynamic-execution"
              class="form-control dynamic-execution-select"
              ng-model="BatchPipelineConfigCtrl.forceDynamicExecution"
              ng-change="BatchPipelineConfigCtrl.onForceDynamicEngineChange()">
            <option value="">Cluster Default</option>
            <option value="forceOn">Force On</option>
            <option value="forceOff">Force Off</option>
          </select>
          <div ng-if="BatchPipelineConfigCtrl.showNumOfExecutors" class="label-with-toggle numExecutors form-group row dynamic-execution-option">
            <span class="toggle-label col-xs-4">Number of executors</span>
            <div class="col-xs-7">
              <select class="form-control small-dropdown"
                  ng-model="BatchPipelineConfigCtrl.numExecutors"
                  ng-options="option as option for option in BatchPipelineConfigCtrl.numExecutorsOptions">
              </select>
              <i class="fa fa-info-circle"
                 uib-tooltip="The number of executors to allocate for this pipeline on Apache Yarn."
                 tooltip-placement="right">
              </i>
            </div>
          </div>
        </div>
        <div class="add-custom-config">
          <span ng-if="!BatchPipelineConfigCtrl.isDeployed">
            <a class="add-custom-config-label"
                ng-click="BatchPipelineConfigCtrl.showCustomConfig = !BatchPipelineConfigCtrl.showCustomConfig">
                <span class="fa"
                      ng-class="{'fa-caret-down': BatchPipelineConfigCtrl.showCustomConfig, 'fa-caret-right': !BatchPipelineConfigCtrl.showCustomConfig}"
                      data-cy="engine-config-tab-custom">
                 </span>
                Show Custom Config
            </a>
            <i class="fa fa-info-circle"
               uib-tooltip="Enter key-value pairs of configuration parameters that will be passed to the underlying {{ BatchPipelineConfigCtrl.engineForDisplay }} program."
               tooltip-placement="right">
            </i>
            <span class="float-xs-right num-rows"
                  ng-if="BatchPipelineConfigCtrl.showCustomConfig">
                {{ BatchPipelineConfigCtrl.numOfCustomEngineConfigFilled() }}
              <ng-pluralize
                count="BatchPipelineConfigCtrl.numOfCustomEngineConfigFilled()"
                when="{'one': 'custom config',
                      'other': 'custom configs'}">
              </ng-pluralize>
            </span>
          </span>
          <span ng-if="(BatchPipelineConfigCtrl.isDeployed) || (!BatchPipelineConfigCtrl.isDeployed && BatchPipelineConfigCtrl.showCustomConfig)">
            <hr />
            <span ng-if="BatchPipelineConfigCtrl.isDeployed">
              <label>Custom config</label>
              <i class="fa fa-info-circle"
                 uib-tooltip="Enter key-value pairs of configuration parameters that will be passed to the underlying {{ BatchPipelineConfigCtrl.engineForDisplay }} program."
                 tooltip-placement="right">
              </i>
              <span class="float-xs-right num-rows">
                  {{ BatchPipelineConfigCtrl.customEngineConfig.pairs.length }}
                <ng-pluralize
                  count="BatchPipelineConfigCtrl.customEngineConfig.pairs.length"
                  when="{'one': 'custom config',
                        'other': 'custom configs'}">
                </ng-pluralize>
              </span>
            </span>
            <div class="custom-config-labels key-value-pair-labels">
              <span class="key-label">Name</span>
              <span class="value-label">Value</span>
            </div>
            <div class="custom-config-values key-value-pair-values">
              <key-value-pairs
                key-values="BatchPipelineConfigCtrl.customEngineConfig"
                on-key-value-change="BatchPipelineConfigCtrl.onCustomEngineConfigChange"
              ></key-value-pairs>
            </div>
          </span>
        </div>
      </div>

      <div class="configuration-step-navigation">
        <div class="apply-action-container"
          ng-if="BatchPipelineConfigCtrl.isDeployed || BatchPipelineConfigCtrl.showPreviewConfig">
          <button
            class="btn btn-primary apply-action"
            ng-if="BatchPipelineConfigCtrl.isDeployed"
            ng-disabled="BatchPipelineConfigCtrl.buttonsAreDisabled() || BatchPipelineConfigCtrl.startingPipeline || BatchPipelineConfigCtrl.updatingPipeline"
            ng-click="BatchPipelineConfigCtrl.applyAndRunPipeline()">
            <span>Save &amp; {{ BatchPipelineConfigCtrl.pipelineAction }}</span>
            <span ng-if="BatchPipelineConfigCtrl.startingPipeline" class="fa fa-spinner fa-spin"></span>
          </button>
          <button
            data-cy="preview-configure-run-btn"
            data-testid="preview-configure-run-btn"
            class="btn btn-primary apply-action"
            ng-if="BatchPipelineConfigCtrl.showPreviewConfig"
            ng-disabled="BatchPipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="BatchPipelineConfigCtrl.applyAndRunPipeline()">
            <span>Run</span>
          </button>
          <button
            class="btn btn-secondary"
            ng-if="BatchPipelineConfigCtrl.isDeployed && BatchPipelineConfigCtrl.activeTab === 'runtimeArgs'"
            ng-disabled="BatchPipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="BatchPipelineConfigCtrl.applyAndClose()">
            Save
          </button>
          <button
            class="btn btn-secondary"
            ng-if="BatchPipelineConfigCtrl.isDeployed && BatchPipelineConfigCtrl.activeTab !== 'runtimeArgs'"
            ng-disabled="!BatchPipelineConfigCtrl.enablePipelineUpdate || BatchPipelineConfigCtrl.updatingPipeline || BatchPipelineConfigCtrl.startingPipeline || BatchPipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="BatchPipelineConfigCtrl.updateAndClose()">
            <span ng-if="!BatchPipelineConfigCtrl.updatingPipeline">Save</span>
            <span ng-if="BatchPipelineConfigCtrl.updatingPipeline">Saving</span>
            <span ng-if="BatchPipelineConfigCtrl.updatingPipeline">
              <span class="fa fa-spinner fa-spin"></span>
           </span>
          </button>
          <span class="num-runtime-args"
                ng-if="BatchPipelineConfigCtrl.activeTab === 'runtimeArgs'">
              {{ BatchPipelineConfigCtrl.runtimeArguments.pairs.length }}
            <ng-pluralize
              count="BatchPipelineConfigCtrl.runtimeArguments.pairs.length"
              when="{'one': 'runtime argument',
                    'other': 'runtime arguments'}">
            </ng-pluralize>
          </span>
        </div>
        <div ng-if="!BatchPipelineConfigCtrl.isDeployed && !BatchPipelineConfigCtrl.showPreviewConfig">
          <button
            class="btn btn-primary apply-close"
            data-testid="config-apply-close"
            ng-disabled="BatchPipelineConfigCtrl.buttonsAreDisabled()"
            ng-click="BatchPipelineConfigCtrl.applyAndClose()">
            Save
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
